<template>
  <div class="box">
    <div class="box1">
      <p class="txt1">嗨购后台管理系统登录</p>
      <el-form :model="form">
        <div class="box2">
      <el-form-item label="账号：" >
        <el-input v-model="form.adminname" @blur="fun1"></el-input>
      </el-form-item>
      <el-form-item label="密码：" >
        <el-input type="password" v-model="form.password"  @blur="fun2"></el-input>
      </el-form-item>
      <el-form-item>
            <el-button @click="fun" @keyup.enter.native="keyDown">登录</el-button>
        </el-form-item>
      </div>
      </el-form>
    </div>
  </div>
 

</template>

<script setup lang="ts">
import { reactive } from "vue";
import service from "../untils/service";
import {useRouter} from "vue-router";
import { ElMessage } from "element-plus";
import 'element-plus/dist/index.css';
import {onMounted,onUnmounted} from 'vue'


const $router = useRouter();

interface User {
  adminname:string,
  password:string
}


const form = reactive<User>({
  adminname:"",
  password:'',
})

let fun1 = () => {
  if (form.adminname == '') {
    ElMessage({
        message:'请输入账号',
        type:'error'
      })
  }
}

let fun2 =  () => {
  if (form.password == '') {
    ElMessage({
        message:'请输入密码',
        type:'error'
      })
  }
}


const keyDown = (e: any) => {
	    if (e.keyCode === 13) {
            fun(); //需要调用的方法
        }
};
 

window.addEventListener('keydown',keyDown,true)



onUnmounted(()=>{
  window.removeEventListener('keydown',keyDown,true)
})

// 发请求，获取登录信息
let fun = () => {
  if (form.adminname == '' || form.password == '') {
    ElMessage({
        message:'请输入账号或密码',
        type:'error'
      })
  } else if (form.adminname !== '' || form.password !== '') {

    service({
    url:'/admin/login',
    method:'post',
    data:form
  }).then(res=>{

    if(res.data.code == '200') {
      // 登录的数据存储到本地
      sessionStorage.setItem('usename',form.adminname)
      sessionStorage.setItem('token',res.data.data.token)
      // 存储当前用户权限
      sessionStorage.setItem("grants",JSON.stringify(res.data.data.checkedkeys));
      //如果登录成功则跳转HomePage页面
      $router.push("/index");

    }else if (res.data.code == '10003') {       // 密码错误
        // alert('密码错误')
      ElMessage({
        message:"密码错误",
        type:'error'
      })
    }else if (res.data.code == '10005'){        // 未注册
      // alert('未注册')
      ElMessage({
        message:'您的账号未注册',
        type:'error'
      })
    }
  })
    
  }




// onUnmounted(() => {
//   window.removeEventListener('keydown', keyDown, false)
// })
  // service({
  //   url:'/admin/login',
  //   method:'post',
  //   data:form
  // }).then(res=>{

  //   if(res.data.code == '200') {
  //     // 登录的数据存储到本地
  //     sessionStorage.setItem('usename',form.adminname)
  //     sessionStorage.setItem('token',res.data.data.token)
  //     //如果登录成功则跳转HomePage页面
  //     $router.push("/HomePage");

  //   }else if (res.data.code == '10003') {       // 密码错误
  //       // alert('密码错误')
  //     ElMessage({
  //       message:"密码错误",
  //       type:'error'
  //     })
  //   }else if (res.data.code == '10005'){        // 未注册
  //     // alert('未注册')
  //     ElMessage({
  //       message:'您的账号未注册',
  //       type:'error'
  //     })
  //   }
  // })
  
}


</script>
  
<style scoped>
.box {
  width: 100%;
  height: 100%;
  background-image: url(../assets/img/Login.png);
  background-size: cover;
  background-repeat: no-repeat;
}

.box1 {
  width: 450px;
  height: 280px;
  background-color: rgba(234, 242, 244, 0.2);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  border-radius: 30px;
}

.txt1 {
  text-align: center;
  font-size: 25px;
  font-weight: bold;
  color: #fff;
  margin-top: 30px;
}

.el-input {
  width:250px
}

.el-button {
  text-align: center;
  color: red;
  margin-left: 140px;
}
.box2 {
  margin-left: 50px;
  margin-top:40px;
}
</style>